<template>
  <div class="equipment">
    <ul class="equipment-list">
      <li
        v-for="(item, index) in equipment_list"
        :key="item.id"
        :class="status(index)"
      >
        <div
          @click="handleChangeEquipment(index, item)"
          class="icon-box"
        >
        <a :href="'#chart-' + index" v-if="item.cate == '电梯'">
          <elevator-svg></elevator-svg>
        </a>
        <a :href="'#chart-' + index" v-else>
          <tower-crane-svg></tower-crane-svg>
        </a>
        </div>
        <p>{{item.tower_name}}</p>
      </li>
    </ul>
    <div class="equipment-chart">
      <div v-for="(item, index) in equipment_list" :key="index">
        <tower-crane-block :driver="driverList[index].driver" :data="realList[index]" :name="item.tower_name" v-if="item.cate == '塔吊' && driverList[index]" :id="'chart-' + index"></tower-crane-block>
        <elevator-block :driver="driverList[index].driver" :data="realList[index]" :name="item.tower_name" v-else-if="item.cate == '电梯' && driverList[index]"></elevator-block>
      </div>
    </div>
  </div>
</template>

<script>
import {
  fetchRealTimeTowerCraneData,
  fetchRealTimeElevatorData
} from "@/api/real";
import { fetchEquipmentList,
  fetchEquipmentDriver } from "@/api/equipment";

import { mapGetters } from "vuex";

import TowerCraneSvg from "@/components/svg/tower_crane.vue";
import ElevatorSvg from "@/components/svg/elevator.vue";

import TowerCraneBlock from './TowerCraneBlock'
import ElevatorBlock from './ElevatorBlock'

export default {
  name: "Equipment-List",
  components: {
    TowerCraneSvg,
    ElevatorSvg,
    TowerCraneBlock,
    ElevatorBlock
  },
  data() {
    return {
      equipment_list: undefined,
      active_num: 0,
      tower_crane: undefined,
      elevator: undefined,
      ws: undefined,
      snList: undefined,
      timer: undefined,
      realList: undefined,
      driverList: undefined
    };
  },
  methods: {
    getData() {
      this.getEquipmentList();
      this.active_num = 0;
    },
    getEquipmentList() {
      fetchEquipmentList().then(res => {
        let arr = res.data.list;
        this.snList = []
        arr.forEach(item => {
          this.snList.push(item.num)
        });
        this.equipment_list = arr;
        this.realList = new Array(arr.length)
        this.getEquipmentDriver()
        this.timer = null
        this.wsSend();
        this.timer = setInterval(() => {
          this.wsSend(1)
        }, 300000)
      });
    },
    handleChangeEquipment(index, item) {
      this.active_num = index;
    },
    wsSend(val) {
      let snList_str = '';
      this.snList.forEach((item, index) => {
        if (this.snList.length - 1 == index) {
          snList_str += item;
          return
        }
        snList_str += item + ',';
      })
      if (val) {
        this.ws.send(JSON.stringify({"type":"heart"}))
        return
      }
      let str = {type: 'client', snList: snList_str}
      this.ws.send(JSON.stringify(str));
    },
    async getEquipmentDriver() {
      this.driverList = []
      for(let i = 0; i < this.snList.length; i ++) {
        let params = {
          num: this.snList[i]
        }
        await fetchEquipmentDriver(params).then(res => {
          this.driverList.push(res.data)
        })
      }
    },
    status(index) {
      let str = ''
      str += this.active_num == index ? 'active': '';
      // if (!this.realList) {
      //   str += ' off-line-icon'
      // } else if (this.realList[index] && this.realList[index].warning != '正常工作') {
      //   str += ' warning-icon'
      // } else if (this.realList[index] && this.realList[index].alarm != '正常工作'){
      //   str += ' early-warning-icon'
      // } else {
      //   return str
      // }
      return str;
    },
    initWebSocket() {
      this.ws = new WebSocket('ws:/120.78.132.121:10003')
      this.ws.onopen = (ev) => { 
        console.log("Connection open ...");
      };
      this.ws.onmessage = (evt) => {
        let obj = JSON.parse(evt.data);
        console.log(obj)
        for(let i = 0; i < this.equipment_list.length; i ++) {
          if (obj.sn == this.equipment_list[i].num) {
            this.$set(this.realList, i, obj)
          }
        }
      }
      this.ws.onclose = (ev) => {
        console.log('连接失败')
        this.timer = null;
      }
    }
  },
  computed: {
    ...mapGetters(["is_set_belong"])
  },
  watch: {
    is_set_belong(newVal) {
      if (newVal) {
        this.getData();
      }
    }
  },
  mounted() {
    this.initWebSocket()
  },
  destroyed() {
    this.timer = null;
  }
};
</script>

<style lang="scss">
::-webkit-scrollbar {
  display: none;
}
.equipment {
  display: flex;
}
.equipment-list {
  list-style: none;
  color: #3581fb;

  .icon-box {
    width: 56px;
    height: 56px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    background: rgba(53, 129, 251, 0.3);
  }

  p {
    margin-top: 4px;
    width: 56px;
    margin-bottom: 26px;
    font-weight: 600;
  }
}

.warning-icon {
  .icon-box {
    background: rgba(250, 92, 92, 0.3);
  }
  border-color: #fa5c5c;
  color: #fa5c5c;

  path {
    fill: #fa5c5c;
  }
}

.early-warning-icon {
  .icon-box {
    background: rgba(234, 160, 0, 0.3);
  }
  color: #eaa000;
  border-color: #eaa000;

  path {
    fill: #eaa000;
  }
}

.off-line-icon {
  .icon-box {
    background: rgba(111, 131, 161, 0.3);
  }
  color: #6f83a1;
  border-color: #6f83a1;

  path {
    fill: #6f83a1;
  }
}

.active {
  position: relative;

  .icon-box {
    border: 4px solid;
  }

  &:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    border-style: solid;
    border-width: 4px 0 4px 12px;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-top-color: transparent;
    transform: translateX(calc(-100% - 4px)) translateY(24px);
  }
}

.equipment-chart {
  box-sizing: border-box;
  margin-left: 54px;
  width: 532px;
  height: 800px;
  overflow-y: auto;

  .equipment-block {
    margin-bottom: 18px;
  }

  &_block {
    margin-top: 8px;
    justify-content: space-between;

    p {
      text-align: right;
    }
  }

  &_box {

    & > div {
      width: 109px;
      margin-right: 32px;

      &:last-of-type {
        margin-right: 0;
      }
    }

    .title {
      font-size: 12px;
      color: #a3b4cc;
      margin-bottom: 12px;

      span {
        margin-left: 4px;
      }
    }

    .no-equipment {
      width: 100px;
      height: 100px;

      & + p {
        text-align: center;
        color: #8F9FB6;
      }
    }
    
  }
}

</style>
